<!-- table -->
<template>
  <div class="test-table-page">
    <Toolbar>
      <Select named="select_lock"
              @onEvent="SwitchEvent">
        <option> 选择锁定的列
        </option>
        <option value="index">序
        </option>
        <option value="name">姓名
        </option>
      </Select>

      <ButtonGroup size="small">
        <Icon type="icon-star" />
        <Input />
        <Button>
          新增
        </Button>
        <Button type="success">
          审核
        </Button>
        <Button type="mark"
                @click="btnEvent('xls')">
          导出到xls
        </Button>
      </ButtonGroup>
    </Toolbar>
    <dl>
      <dt>

        全选
        <Switch v-model="the.select.desc"
                named="desc"
                @onEvent="SwitchEvent" />
        <input v-model="the.select.desc"
               type="checkbox">

        开启合计
        <Switch v-model="the.show.sum"
                named="switch.sum"
                @onEvent="SwitchEvent" />
      </dt>
      <!-- <dd>
        <CheckboxGroup v-model="the.select.sort_field">
          <CheckItem v-for="(item, index) in the.columns"
                     :key="index"
                     v-model="the.select.sort_field"
                     :value="item.key">
            {{ item.title }}
          </CheckItem>
        </CheckboxGroup>
      </dd> -->
      <dd>
        {{ the.select.sort_field }}
        <Checkbox v-model="the.select.desc"
                  named="descField"
                  @onEvent="SwitchEvent" />
      </dd>
      <dd>
        <span v-for="(item, index) in the.columns"
              :key="index">
          <Checkbox v-model="the.select.sort_field"
                    :value="item.key">{{ item.title }}</Checkbox>
        </span>
      </dd>
      <dd></dd>
    </dl>
    {{the.testChecks}}
    <Table border
           named="testTable"
           :data="the.dataTest"
           :foots="the.foots"
           :checkeds="the.testChecks"
           show-foot
           show-check
           @onEvent="tableEvent" />

    <br />
    {{ the.checkeds }}
    <Tag v-for="(item, index) in the.checkeds"
         :key="index"
         :named="index"
         closable
         @onEvent="onTagEvent">
      {{ item }}
    </Tag>
    <Table ref="tableDom"
           border
           :columns="the.cols"
           :data="the.data"
           :start="the.paged.size*(the.paged.index-1)"
           :foots="the.foots"
           :checkeds="the.checkeds"
           show-check
           show-foot
           @onEvent="tableEvent" />

    <!-- 分页 -->
    <Paged :count="the.paged.count"
           :current="the.paged.index"
           :page-size="the.paged.size"
           :page-size-opts="the.paged.sizes"
           :pre-length="2"
           :next-length="2"
           @onEvent="pagedEvent" />

    <div class="page-foot"></div>
  </div>
</template>

<script>
import { reactive, ref, h } from '@/components/vue.api';
import { frame, message, } from '@/components'
import { testColumns, testTbCol, testTbData } from './test-data'

export default {
  setup () {
    // 引入上下文
    // const { ctx } = getCurrentInstance()

    /** 表格对象 */
    const tableDom = ref();

    const the = reactive({
      show: {
        // 不显示合计
        sum: false
      },
      // 查询组合
      select: {
        // 查询排序的字段，默认是ID
        sort_field: ['name'],
        // 查询模式：降序还是升序
        desc: null,
        // 是否开启多条件查询
        cate_more: false,
        // 选择的查询条件符号
        cate: '=',
        // 查询字段
        field: 'name',
        // 查询组合条件
        where: [],
        // 查询内容
        word: '',
      },
      columns: testColumns,
      cols: testTbCol,
      // 默认选择
      checkeds: [2],
      testChecks: [5, 3],
      // 表格底部
      foots: [],
      //   {
      //     name: '合计',
      //     // 求和方法(表格数据)
      //     age: (data) => {
      //       let value = 0;
      //       data.map(item => {
      //         value += item.age
      //       });
      //       //求和
      //       return value
      //     }
      //   }
      // ],
      data: [],
      // 查询分页标签
      paged: {
        // 查询地址
        api: '',
        // 查询模板类型 1:接口属性,2:只查询数据，不返回属性,其它自定义
        tpl: 2,
        // 查询条件
        where: [],
        // 查询扩展参数
        par: null,
        // 扩展外键查询
        join: null,
        // join: [
        //   {
        //     tField: 'QF_Group_ID',
        //     cTable: 'AP10000DB.[dbo].[QF_Group]',
        //     cTitle: 'NameShort'
        //   }
        // ],
        // 当前页码
        index: 1,
        // 每页取数据条数
        size: 3,
        // 分页数
        sizes: [1, 3, 5, 10],
        /** 总条数 */
        count: 0,
        // 是否小型分页
        // small: true,
        // 最大页码按钮数
        // max: 4,
        // 页码按钮
        // layout: 'count, sizes, prev, pager, next, jumper',
      },
    });



    /** 跨页多选 */
    let pageCheckeds = {}
    // 初始当前页面
    pageCheckeds[the.paged.index] = the.checkeds

    /** 
    * 表格触发事件
    * 
    */
    const tableEvent = (resp) => {
      // 触发事件
      //  console.log('tableEvent', resp)
      switch (resp.cmd) {
        case 'td':

          if (resp.th && resp.th.eventKey) {

            switch (resp.th.eventKey) {
              case 'index':
                // 数据行点击
                btnIndex(resp.row.index + resp.row.start)
                break;
              case 'name':
                // 数据行点击
                btnIndex(resp.row.index + resp.row.start)
                break;
              default:
                // 数据行点击 ，获取点击对象      
                resp.event.currentTarget.innerHTML = "ok:" + resp.th.key;
            }
          } else {
            console.log('tableEvent.td', resp)
          }
          break;
        case 'checkAll':
        case 'check':
          console.log('check', resp)
          // 表格勾选
          if (resp.byNamed != 'testTable') {
            // 分页数组
            pageCheckeds[the.paged.index] = resp.checkeds
            the.checkeds = resp.checkeds
          } else {
            // 分页数组
            the.testChecks = resp.checkeds
          }

          break;
        //thSort 表头排序
        case 'error_thSort':
          // 排序报错
          console.error('test.error_thSort', resp.error)
          message.error('排序错误，请检查配置:' + resp.data.key)
          break;
        case 'thDarg':
          // 拖动事件,更新表头顺序
          the.cols = resp.change(the.cols);
          break;
        default:
          console.log('test.tableEvent', JSON.stringify(resp))
          break;
      }
    }


    /**
     * 触发事件
     * @param {*} index 序号
     * @param {*} value 传入值
     */
    const btnIndex = (index, value) => {
      console.log('btnIndex:' + index, value)
      value = value || testTbData[index]
      frame.open({
        title: '测试函数组件' + index,
        model: {
          props: value,
          // 进行组件标记
          // 函数组件
          component: (props) => {
            return h('div', `${props.name}`)
          }
        }
      })
    }


    const btnSearch = () => {
      the.paged.count = testTbData.length
      let _start = (the.paged.index - 1) * the.paged.size
      let _list = testTbData.slice(_start, _start + the.paged.size)
      console.log('btnSearch:' + _start + ',size:' + the.paged.size, _list.length)
      return _list;
      // console.log('btnSearch:' + _start, _data)
    }

    /** 分页触发事件 */
    const pagedEvent = (resp) => {
      //  console.log('paged:' + resp.cmd, JSON.stringify(resp))
      switch (resp.cmd) {
        case 'change':
          the.paged.index = resp.index;
          the.data = btnSearch()
          break;
        case 'size':
          the.paged.size = resp.value;
          the.paged.index = 1;
          the.data = btnSearch()
          break;
      }

      // 当前页面勾选
      console.log('pagedEvent：' + the.paged.index, pageCheckeds[the.paged.index])
      // 更新当前页面勾选的
      the.checkeds = pageCheckeds[the.paged.index]
    }

    /**  全选 */
    const SwitchEvent = (resp) => {
      // console.log('SwitchEvent', resp);


      switch (resp.cmd) {
        case 'switch':
          if (resp.named == 'switch.sum') {
            the.foots = [{
              name: '合计',
              // 求和方法(表格数据)
              age: (data) => {
                let value = 0;
                data.map(item => {
                  value += item.age
                });
                //求和
                return value
              }
            }
            ]
          }

          break;

        case 'change':

          if (resp.named == 'select_lock') {
            // 锁定的顺序
            the.cols[resp.index].lock = resp.index - 1;
          }
          break;
      }

      // if (!resp.checked) {
      //   //实现反选
      //   the.select.sort_field = [];
      // } else {
      //   //实现全选
      //   let _field = [];
      //   for (let i = 0; i < the.columns.length; i++) {
      //     _field.push(the.columns[i].key);
      //   }

      //   the.select.sort_field = _field
      // }
      // console.log(JSON.stringify(the.checkList));

    }

    const btnEvent = (cmd) => {
      // 触发导出xls 事件
      tableDom.value.exportTo()
    }

    const onTagEvent = (resp) => {
      console.log('onTagEvent', resp);
      switch (resp.cmd) {
        case 'close':
          // 关闭当前页的选择
          let _index = parseInt(resp.named)

          let _cs = JSON.parse(JSON.stringify(the.checkeds));
          _cs.splice(_index, 1);
          console.log('onTagEvent', the.checkeds)

          // the.checkeds.splice(_index, 1)
          the.checkeds = _cs
          console.log('onTagEvent.cs', the.checkeds)
          break
      }
    }

    the.dataTest = testTbData.slice(0, 15);
    the.data = btnSearch()



    return { the, tableDom, tableEvent, SwitchEvent, pagedEvent, onTagEvent, btnEvent }

  }
}

</script>

<style lang="less">
.test-table-page {
  margin: 0.25rem;
  .tb-row-cs {
    color: brown;
    // text-align: center;
  }

  .lock-col-1 {
    left: 5rem;
  }
}

.page-foot {
  height: 2rem;
}
</style>